<script lang="ts" setup>
import { addStudentsToCourse, getStudent } from '@/api/course';
import type { courseStudent, studentInfo } from '@/api/type';
import { getAllStudent } from '@/api/user';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const tableData = ref<studentInfo[]>([])
const props = defineProps(['cid']);
const show = ref<boolean>(true);//展示
const allStudent = ref<studentInfo[]>([])
const showAllStudent = async () => {
    let res = await getAllStudent();
    allStudent.value = res.data.filter((student: studentInfo) => !tableData.value.some(data => data.id === student.id));
}
const addStudent = () => {
    show.value = false
}
// 批量增加的学生数据
const newstudents = ref<courseStudent>({ cid: Number(props.cid) });
const handleSelectionChange = (selection: studentInfo[]) => {
    // 清空之前选中的学生ID数组
    newstudents.value.studentIds = [];
    // 将选中行的id值存储到newstudents.studentIds数组中
    selection.forEach(item => {
        newstudents.value.studentIds.push(item.id as number);
    });

}
// 添加学生
const handleSelection = async () => {
    console.log("newStudents===", newstudents.value);
    let res = await addStudentsToCourse(newstudents.value);
    ElMessage.success("添加成功")
    show.value = true;
    window.location.reload();
}
onMounted(async () => {
    const result = await getStudent(props.cid);
    tableData.value = result.data
    showAllStudent();
    console.log("根据课程cid获取学生信息", result.data);
})
</script>
<template>
    <el-card>
        <el-form :inline="true" style="display: flex; justify-content: center;">
            <el-form-item label="学号">
                <el-input></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100px;">
                    <el-icon style="margin-right: 10px;">
                        <Search />
                    </el-icon>搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card style="margin-top: 7px;">
        <div style="margin-left: 15%; margin-bottom: 20px;">
            <el-button @click="addStudent" v-if="show">添加学生</el-button>
            <el-button type="primary" @click="handleSelection" v-show="!show">添加</el-button>
            <el-button>批量删除</el-button>
        </div>
        <div class="main">
            <el-table :data="tableData" stripe style="width: 70%;" v-show="show">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="序号" />
                <el-table-column prop="schoolId" label="学号" />
                <el-table-column prop="name" label="姓名" width="180" />
                <!-- <el-table-column prop="address" label="Address" /> -->
            </el-table>

            <el-table :data="allStudent" stripe v-show="!show" style="width: 70%; "
                @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="序号" />
                <el-table-column prop="schoolId" label="学号" />
                <el-table-column prop="name" label="姓名" width="180" />
            </el-table>

        </div>
    </el-card>
</template>

<style scoped>
.main {
    display: flex;
    height: auto;
    justify-content: center;
}
</style>
